<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-date-picker style="width: 350px;" v-model="data_time" @change="datetime_btn" type="datetimerange"
                        start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" />

                    <el-input style="width: 150px;margin-left:10px" v-model="find_data.applyManInfo" placeholder="申请人姓名/电话"
                        clearable />
                    <el-input style="width: 150px;margin-left:10px" v-model="find_data.checkManInfo" placeholder="审核人姓名/电话"
                        clearable />
                    <el-input style="width: 150px;margin-left:10px" v-model="find_data.doubleCheckManInfo"
                        placeholder="核销人姓名/电话" clearable />
                    <el-input style="width: 150px;margin-left:10px" v-model="find_data.gathManInfo" placeholder="收款车队名称"
                        clearable />
                    <el-input style="width: 100px;margin-left:10px" v-model="find_data.payMoney" placeholder="付款金额"
                        clearable />
                    <el-select v-model="find_data.checkStatuses" placeholder="审核状态" style="width: 160px;margin-left:10px"
                        multiple collapse-tags clearable>
                        <el-option label="已拒绝" value="REFUSED"></el-option>
                        <el-option label="未审核" value="NO_CHECK"></el-option>
                        <el-option label="已审核" value="CHECKED"></el-option>
                        <el-option label="已核销" value="CHECKED"></el-option>
                    </el-select>
                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div style="margin-top:10px;display: flex;">
                    <!-- <el-button @click="add_btn" type="primary" icon="SuccessFilled">核销付款</el-button> -->
                    <!-- <el-button @click="up_btn" type="warning" icon="WarnTriangleFilled">修改</el-button>
                    <el-button @click="del_btn" type="danger" icon="CircleCloseFilled">删除</el-button> -->
                </div>
            </template>
            <div>
                <el-table border @selection-change="selection_change_btn" height="67vh" ref="multipleTableRef"
                    :data="list_data" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field"
                            :label="item.label"></el-table-column>
                    </template>


                </el-table>
            </div>

            <div style="margin-top:20px">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.page.pageNum" v-model:page-size="find_data.page.pageSize"
                    :page-sizes="[20, 50, 100, 200]" :background="true" layout="prev, pager, next, jumper,->,sizes,total,"
                    :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 表格筛选 -->
        <div style="position: absolute;top:100px;z-index: 9999;" :style="icon_off ? 'right:0px;' : 'right:110px;'">
            <el-icon @click="icon_btn" :size="20">
                <Setting />
            </el-icon>
            <div v-show="icon_off"
                style=" position: relative;top:-100px;right:140px;width: 130px;height:430px;background:#fff;overflow: hidden;">
                <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                    <div>
                        <el-button-group style="display: flex; ">
                            <el-tooltip effect="dark" placement="bottom">
                                <template #content>注意：拖动下面的项，可以改变表格列的顺序，<br />记得点击保存才会永久生效哦！ </template>
                                <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                            </el-tooltip>
                            <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button>
                            <el-button title="保存" type="primary" icon="Check" @click="saveTableSet"></el-button>
                        </el-button-group>
                        <div ref="sortableContainer" class="col-items" style="height:400px; overflow-y: auto; ">
                            <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in sortedItems"
                                :key="item.field" v-model="item.off" :label="item.label" border>
                            </el-checkbox>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="40%" :close-on-click-modal='false'>
            <el-form v-if="isKcbProvideCar" :model="add_data" ref="writeOffPaymentFm" label-width="130px" label-suffix="：">
                <el-form-item label="付款类型" prop="payType" required
                    :rules="[{ required: true, message: '付款类型不能为空', trigger: 'change' }]">
                    <el-radio-group v-model="add_data.payType" @change="changePayType">
                        <el-radio :label="1">余额支付</el-radio>
                        <el-radio :label="2">微信扫码支付</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>


            <el-button @click="ok_btn" style="margin-left:30vw" type="primary">我已支付</el-button>
            <el-button @click="ok_btn" style="margin-left:30vw" type="primary">确认支付</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import Sortable from 'sortablejs';
import { GET_TOKEN } from '@/utils/token.js'
import { ref, reactive, onMounted, computed } from 'vue'
import {
    adupPrivateSet, getPrivateSetList, orderPayApplyPageList, payApplyOrderByWX, wxPayByPc

} from '@/api/original_order_list.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { importCusCheckInData } from '@/utils/common.js'
import CircularJSON from 'circular-json'
onMounted(async () => {
    let payment_application_list = JSON.parse(localStorage.getItem('payment_application_list'))
    if (payment_application_list) {
        data_time.value = [payment_application_list.stime, payment_application_list.etime]
        find_data.stime = payment_application_list.stime
        find_data.etime = payment_application_list.etime
        find_data.applyManInfo = payment_application_list.applyManInfo
        find_data.checkManInfo = payment_application_list.checkManInfo
        find_data.checkStatuses = payment_application_list.checkStatuses
        find_data.doubleCheckManInfo = payment_application_list.doubleCheckManInfo
        find_data.gathManInfo = payment_application_list.gathManInfo
        find_data.payMoney = payment_application_list.payMoney
    }

    getPrivateSetList({
        find: '付款申请列表',
        page: {
            pageNum: 1,
            pageSize: 20,
        },
    }).then(res => {
        if (res.data.list[0]) {
            table_data_list_new.value = JSON.parse(res.data.list[res.data.list.length - 1].dat)
        } else {
            console.log('no')
            table_data_list_new.value = table_data_list
        }
    })


    Sortable.create(sortableContainer.value, {
        draggable: '.drag_it',
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
            const targetRow = table_data_list_new.value.splice(evt.oldIndex, 1)[0];
            table_data_list_new.value.splice(evt.newIndex, 0, targetRow);
        }
    })

    payApplyOrderByWX({ ids: 1 }).then(res => {
        console.log(res)
    })
    wxPayByPc({
        ids: [1],
        payMoney: 0.1,
        payType: 'ORDER_PAY'
    }).then(res => {
        console.log(res)
    })



    await list_api()

})

//#region 表格数据处理
const table_data_list = reactive([
    { label: '申请人', field: 'bankName', width: '', off: true },
    { label: '审核人', field: 'bankName', width: '', off: true },
    { label: '核销人', field: 'bankName', width: '', off: true },
    { label: '审核状态', field: 'bankName', width: '', off: true },
    { label: '交易状态', field: 'bankName', width: '', off: true },
    { label: '交易金额', field: 'bankName', width: '', off: true },
    { label: '付款方式', field: 'bankName', width: '', off: true },
    { label: '申请时间', field: 'bankName', width: '', off: true },
    { label: '收款方', field: 'bankName', width: '', off: true },
    { label: '用车单号', field: 'bankName', width: '', off: true },
    { label: '添加时间', field: 'bankName', width: '', off: true },
])

const table_data_list_new = ref([])
const icon_off = ref(false)
// 创建排序容器的引用
const sortableContainer = ref('')

const icon_btn = () => {
    icon_off.value = !icon_off.value
    console.log(sortableContainer.value)

}
const resetTableSet = () => {
    console.log(table_data_list)
    table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list))
    console.log(table_data_list)
    console.log(table_data_list_new.value)
}
const saveTableSet = () => {
    adupPrivateSet({
        dat: JSON.stringify(table_data_list_new.value),
        tbName: '付款申请列表',
        tbNum: "payment_application_list",
    }).then(res => {
        if (res.code == 1) {
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    icon_off.value = false
}

const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}

const sortedItems = computed(() => {
    return [...table_data_list_new.value].sort((a, b) => a.id - b.id);
})
//#endregion



//#region 分页列表
const data_time = ref([])
const datetime_btn = (e, y, c) => {
    if (data_time.value) {
        find_data.stime = data_time.value[0]
        find_data.etime = data_time.value[1]
    } else {
        find_data.stime = ''
        find_data.etime = ''
    }

}
const list_data = ref([])
const find_data = reactive({
    page: {
        pageNum: 1,
        pageSize: 20,
    },
    applyManInfo: '',
    checkManInfo: '',
    checkStatuses: '',
    doubleCheckManInfo: "",
    stime: "",
    etime: "",
    gathManInfo: "",
    payMoney: "",
})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.page.pageNum = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {

    orderPayApplyPageList(find_data).then(res => {
        list_data.value = res.data.list
        total.value = res.data.total
    })
}
//#endregion

//#region 添加
const add_off = ref(false)
const title = ref('核销付款')
const add_data = reactive({
    ids: '',
    payType: '',
    payPass: '',
})
const isKcbProvideCar = ref('') // 供车方是否是客车帮
const wxScanPayQRcode = ref('') // 微信扫码支付二维码地址
const outTradeNo = ref('') // 支付订单号
const payTotalMoney = ref('') // 支付总金额
const qrImgObj = ref('') // 二维码图片对象
const qrValidTime = ref('') // 二维码有效时间显示
const qrTimer = ref('') // 二维码有效时间倒计时定时对象、
const add_btn = () => {
    // if (table_list.value.length != 1) {
    //     return ElMessage({
    //         message: '请选择一条数据！',
    //         type: 'warning',
    //     })
    // }
    title.value = '核销付款'

    add_off.value = true

}

// 支付方式-改变事件
const changePayType = () => {
    alert('切换支付方式（未写）')
}
//#endregion

//#region 表格选择
const table_list = ref([])
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion



//#region 搜索
const search_btn = () => {
    localStorage.setItem('payment_application_list', CircularJSON.stringify(find_data))
    list_api()
}
//#endregion


</script>

<style scoped lang='scss'>
</style>

<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}


.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
